﻿@{
    ViewBag.Title = "JavaScript Grundlagen";
}
<h2>
    JavaScript Grundlagen</h2>
<p>
    Hallp P1</p>
<p>
    Hallp P2</p>
<p>
    Hallp P3</p>
<p>
    Hallp P4</p>
<p>
    Hallp P5</p>
<div id="newElem">
</div>
<script>

    //Person Objekt erstellen
    var person = {
        firstName: 'Squad',
        lastName: 'Wuschel',
        getFullNmae: function () {
            return this.firstName + " " + this.lastName;
        }
    };

    console.log(person.getFullNmae());

    //Array initialisieren
    var names = ["Squad", "Wuschel", "Leader"];
    names.push("Karsten"); //Eintrag dem Array hinzufügen
    console.log(names);
    names.pop(); //Entfernen des letzten Eintrags aus dem Array

    //MEssageboxtypen in JavaScript
    //alert //confirm() //prompt
    (function () {
        var href = location;
        console.log(href);

        //Mit Localtion kann man direkt auf eine URL verweisen und der browser lädt die URL
        //if (confirm("Do you need google")) {
        //    location = "http://google.com";
        //}
    })();

    //Selectoren
    var element = document.querySelector("p"); //gibt das erste p Elemente im Tree zurück per selector
    console.log(element.parentNode.tagName);
    var elements = document.querySelectorAll("p"); //gibt alle p Elemente im Tree zurück per selector
    var elemById = document.getElementById("#newElem");

    //DOM "manipulieren" neue Elemente erstellen
    (function (document) {

        var el = document.createElement("p"),
            content = document.createTextNode("This was dynamicly created"),
            style = el.style;

        //Style setzten
        style.color = "blue";
        style.border = "1px solid black";
        style.backgroundColor = "yellow";
        el.className = "blubb checkcss";

        //classList wird nicht vom IE Supported also nicht verwenden
        el.classList.toggle("hallo1"); //fügt hinzu oder entfernt wenn nicht vorhanden
        el.classList.add("blubb5"); //fügt die klasse hinzu

        el.innerHTML = "<strong>Dynamisch erstellt 2</strong><br/>";
        el.appendChild(content);
        el.setAttribute("align", "center");
        el.id = "bar";

        document.getElementById("newElem").appendChild(el);
        //element.parentNode.replaceChild(el, element); //ersetzten eines Elements aus dem DOM

    })(document);

    //Timer Function setTimeout
    (function () {

        var i = 0;
        var doSomething = function () {
            console.log("do something " + i + " times");

            //Nur 10 mal ausführen 
            if (i++ < 10) {
                //Damit immer wieder aufrufen nach 2 sekunden
                setTimeout(doSomething, 2000);
            }
        };

        //Nut timeout Function, welche erst nach 2sek ausgeführt wird
        var timer = setTimeout(doSomething, 2000);
        clearTimeout(timer); //einen Timer stoppen, damit wird SetTimer niemals ausgeführt, da er direkt wieder gestoppt wurde.
        console.log("First");

        //INTERVALL Funktion
        i = 0;
        var doSomething2 = function () {
            console.log("do something 2 ");

            if (i++ > 9) {
                //Stoppen des IntervallTimers
                clearInterval(intervall);
            }
        };

        //wenn eine Funktion immer wieder aufgerufen werden soll gibt es noch setInterval(doSomething, speed)
        var intervall = setInterval(doSomething2, 2000);
    })();


    //JAVASCRIPT EVENTS
    (function () {
        //DOM Level 0 Event Handlers
        //die funktion onload wird aufgerufen wenn der Browser alles geladen hat, dann kann das JavaScript auch am Anfang der Seite stehen!
        window.onload = function () {
            //Element heraussuchen und "etwas machen" wenn darauf geklickt wird
            var el = document.getElementById("newElem");
            el.onclick = function () { //hier kann man nur ein Event auf ein Element legen, sobald ein zweites darauf gelegt wird, wird das erste überschrieben
                //Do Something
            };
        };

        //"Neue" Eventhandler, hier können mehrere Events auf ein Element gelegt werden.
        var buttonClick = function() {
                //Do Something
        };

        var el = document.getElementById("newElem");
        el.addEventListener('click', buttonClick);
        el.removeEventListener(buttonClick); //Den Eventlistener wieder entfernen

        el.addEventListener('click', function(evt) {
            //den normalen Ablauf "verhindern"
            evt.preventDefault();
        });

    })();

</script>
